<template>
  <div class="cation-box">
    <div class="cation">
      <ul>
        <li v-for="item in cation.cationlist">
          <a href="javascript:">
            {{item.cationname}}
            <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
          </a>
        </li>

      </ul>
    </div>
    <div class="cation-img">
      <template>
        <el-carousel :interval="3000" arrow="always">
          <el-carousel-item v-for="(item,index) in imglist" :key="index">
            <img :src="item.url" class="img" />
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cation: {
          cationlist: [{
              cationname: "手机 电话卡"
            },
            {
              cationname: "电视 盒子"
            },
            {
              cationname: "笔记本 平板"
            },
            {
              cationname: "家电 插板"
            },
            {
              cationname: "出行 穿戴"
            },
            {
              cationname: "智能 路由器"
            },
            {
              cationname: "电源 配件"
            },
            {
              cationname: "健康 儿童"
            },
            {
              cationname: "耳机 音箱"
            },
            {
              cationname: "生活 箱包"
            }
          ]
        },
        imglist: [{
            url: require('@/assets/1.jpg')
          },
          {
            url: require('@/assets/2.jpg')
          },
          {
            url: require('@/assets/3.jpg')
          },
          {
            url: require('@/assets/4.jpg')
          },
          {
            url: require('@/assets/5.jpg')
          },
        ]

      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  @import url("../../static/style/font-awesome-4.7.0/css/font-awesome.css");

  .cation-box {
    position: relative;
    height: 27.5rem;
  }

  .cation-box .cation {
    position: absolute;
    left: 10.625rem;
    background-color: #9d9ca3;
  }

  .cation-box .cation ul li {
    width: 14.4rem;
    height: 2.625rem;

  }
  .cation-box .cation ul li:hover{
    cursor: position;
    background-color: #FF6601;
  }

  .cation-box .cation ul li a {
    display: block;
    font-size: 0.875rem;
    line-height: 2.625rem;
    color: #FFFFFF;
    padding-left: 1.25rem;

  }

  .cation-box .cation ul li a i {
    position: absolute;
    padding-top: 0.325rem;
    right: 1.35rem;
  }

  .cation-box .cation-img {
    position: absolute;
    width: 84.3rem;
    /* height: 10rem; */
    left: 24.9875rem;

  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item{
    height: 500px;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .img {
    width: 100%;
    height: auto;

  }
</style>
